import React, { Component } from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  Popconfirm,
  Modal,
  InputNumber,
  message
} from 'antd';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import moment from 'moment';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const { Search, TextArea } = Input;
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';

const { Meta } = Card;

import Trend from '@/components/Trend';
import styles from './vip.less';

import { getValueWithLocalStorage } from '@/utils/authority';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const namespace = 'vip';
import router from 'umi/router';
import config from '../../../config/web.config'

const mapStateToProps = state => {
  const list = state[namespace].historyList;
  const total = state[namespace].total;
  const isLoading = state[namespace].isLoading;

  return {
    list,
    total,
    isLoading,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getVipCardHistoryList: (_cardId,_owner) => {
    const action = {
      type: `${namespace}/getVipCardHistoryList`,
      payload: {
        cardId:_cardId,
        owner:_owner,
      },
    };
     dispatch(action);
   },
  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class VipCardHistoryList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cardId:this.props.location.query.cardId,
      shopTel:this.props.location.query.shop,
    };
  }

  componentDidMount() {
    this.reloadData();
  }

  reloadData= ()=>{
    this._getVipCardHistoryList()
  }


  _getVipCardHistoryList = () => {
    this.props.getVipCardHistoryList(
      this.state.cardId,
      this.state.shopTel
    );
  };


  render() {
    const columns = [
      {
        title: '操作类型',
        dataIndex: 'optType',
        key: 'optType',
        render: (text, record) => (
          record.optType == '0' ?
            <span>普通充值
            </span>:(record.optType == '1' ?
            <span>新增套餐
            </span>:record.optType == '2' ?
              <span>卡内金额消费
            </span>:record.optType == '3' ?
                <span>套餐内消费
            </span>:null)
        ),
      },
      {
        title: '操作明细',
        dataIndex: 'optDesc',
        key: 'optDesc',
        render: (text, record) => (
          <Row>
            <span>{record.optDesc}</span>
            <br/>
            <span>{ record.optType == '0' ?
            <span>充:{record.optMoney} 增:{record.giveMoney}
            </span>:(record.optType == '1' ?
            <span>套餐价格:{record.optMoney}
            </span>:record.optType == '2' ?
              <span>卡内消费:{record.optMoney}
            </span>:record.optType == '3' ?
                <span></span>:null)}</span>
          </Row>
        ),
      },
      {
        title: '发生时间',
        dataIndex: 'inserttime',
        key: 'inserttime',
      },
    ];

    var that = this;
    return (
      <div>
        <Table
          columns={columns}
          pagination={{
            current: Number(this.state.page) + 1,
            loading: this.props.isLoading,
            pageSize: Number(this.state.pagesize),
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: ['1', '5', '10', '20', '50'],
            total: this.props.total,
            onShowSizeChange: (current, size) => {
              that.setState({ pagesize: size, page: 0 }, () => {
                that.reloadData();
              });
            },
            onChange: (page, pageSize) => {
              that.setState({ page: page - 1 }, () => {
                that.reloadData();
              });
            },
            showTotal: total => `总计 ${total} 条`,
          }}
          dataSource={this.props.list}
        />
      </div>
    );
  }
}
